import { createRef, PureComponent } from "react";

//editing
/**
 * 在react中，父组件更新，一定会引起子组件更新，但子元素不一定需要更新，这是就需要使用SCU或PureComponent来对组件更新进行优化
 * 
 * PureComponent 是Component的进化版，Component有的功能它都有，在Component的基础上，PureComponent内置了一个具有浅对比的SCU函数
 */
class Todo extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isEdit: false,
            editVal: props.data.title
        }
    }
    edit = createRef(null);
    // componentDidMount() {
    //     console.log(this.edit);
    // }
    componentDidUpdate(prevProps, prevState) {
        if (!prevProps.isEdit && this.state.isEdit.isEdit) {
            this.edit.current.focus();
        }
    }
    render() {
        // console.log(this.props);
        const { data, changeDone, removeTodo, editDone } = this.props;
        const { id, title, done } = data;
        const { isEdit, editVal } = this.state
        // console.log(id, "组件更新了");
        return (
            <li className={isEdit ? "editing" : ""}>
                <div className={`todo ${done ? "done" : ""}`}>
                    <div className="display">
                        <input className="check" type="checkbox" checked={done}
                            onChange={({ target }) => {
                                changeDone(id, target.checked)
                            }}
                        />
                        <div className="todo-content"
                            // onDoubleClick={() => {
                            //     this.setState({
                            //         isEdit: true
                            //     }, () => {
                            //         this.edit.current.focus();
                            //     })
                            // }}
                            //使用更新生命周期componentDidUpdate
                            onDoubleClick={() => {
                                this.setState({
                                    isEdit: true
                                })
                            }}
                        >{title}</div>
                        <span className="todo-destroy"
                            onClick={() => {
                                removeTodo(id)
                            }}
                        ></span>
                    </div>
                    <div className="edit">
                        <input className="todo-input" type="text"
                            ref={this.edit}
                            value={editVal}
                            onChange={({ target }) => {
                                this.setState({
                                    editVal: target.value
                                })
                                // editDone(id, target.value)
                            }}
                            onBlur={() => {
                                if (editVal.trim()) {
                                    editDone(id, editVal);
                                } else {
                                    this.setState({
                                        editVal: title
                                    })
                                }
                                this.setState({
                                    isEdit: false
                                })
                            }}
                        />
                    </div>
                </div>
            </li>
        )
    }
}

export default Todo;